<template>
    <section class="wp-emp-detail">
        <div class="flex-row emp-header">
            <div class="flex-row">
                   <div class="info_avatar">
                      <el-avatar
                            :size="60"
                            :src="employeeInfo.avatar">
                              {{employeeInfo.employeeName?employeeInfo.employeeName.substring(1):''}}
                            </el-avatar>
                    </div>
                    <div class="flex-row">
                        <div>
                            <div>{{employeeInfo.employeeName||'--'}}</div>
                            <div class="info__empCode">编号：{{employeeInfo.employeeCode||'--'}}</div>
                        </div>
                        <div style="margin-left:10px">
                            <el-tag  :type="employeeInfo.status===1?'success':employeeInfo.status===-1?'danger':'warning'">{{employeeInfo.statusName}}</el-tag>
                        </div>
                    </div>
            </div>
            <div class="emp-header_opt">
                <el-button v-if="employeeInfo.status!==-1" @click="editEmp" type="warning">编辑</el-button>
                <el-button v-else type="danger" @click.native="deleteEmp">删除</el-button>
                <el-dropdown
                   v-if="employeeInfo.status!==-1"
                   trigger="click" @command="handleSelect" placement="bottom-start">
                     <el-button icon="el-icon-more-outline"></el-button>
                     <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="resetPwd" icon="el-icon-edit-outline">
                            重置密码
                          </el-dropdown-item>
                        <el-dropdown-item v-if="employeeInfo.status!==-1" command="suspendEmp" :icon="employeeInfo.status===0?'el-icon-unlock':'el-icon-lock'">
                            {{employeeInfo.status===0?'启用':'停用'}}
                        </el-dropdown-item>
                        <el-dropdown-item  command="departureEmp" icon="el-icon-turn-off">
                            离职
                        </el-dropdown-item>
                     </el-dropdown-menu>
                   </el-dropdown>
            </div>
        </div>
        <div class="emp-account">
            <div>账号(登录)：{{employeeInfo.loginAccount||'--'}}<span style="margin-left:10px" v-if="!employeeInfo.lastLoginTime">
                    <el-tag type="warning">未激活</el-tag>
                </span></div>
            <div>最近登录时间：{{employeeInfo.lastLoginTime||'--'}}</div>
        </div>
              <el-divider></el-divider>
        <div class="emp-content">
            <div class="flex-row content" v-for="(item,index) in options" :key="index" v-if="!item.hidden">
                    <div class="content_label">{{item.label}}</div>
                    <div v-if="item.code==='entryDate'||item.code==='departureDate'">
                        {{ item.value | FormatDate('yyyy-MM-dd') }}
                    </div>
                    <div v-else-if="item.code==='positionInfoList'">
                        <span style="margin-left:2px" v-for="(p,i) in item.value" :key="i">
                          <el-badge v-if="p.mainPosition==1" type="warning" value="主职位">
                            <el-tag effect="dark">{{p.positionName}}</el-tag>
                          </el-badge>
                          <el-tag v-else effect="plain">{{p.positionName}}</el-tag>
                        </span>
                    </div>
                    <div v-else-if="item.code==='departmentInfoList'">
                        <span style="margin-left:2px" v-for="(p,i) in item.value" :key="i">
                            <el-tag>{{p.departmentName}}</el-tag>
                        </span>
                    </div>
                    <div v-else>{{item.value}}</div>
            </div>
        </div>
            <DepartureDate :visible.sync="departureVisible" :data="employeeInfo" @save="updateDepartureDate"/>
            <EmployeePanel @afterSave="afterUpdate" :isCreate="false" v-if="employeeVisible" title="编辑员工信息" :visible.sync="employeeVisible" :data="employeeInfo"/>
    </section>
</template>

<script>
import employee from '@/api/system/employeeAPI'
import auth from '@/api/auth'
import DepartureDate from './edit/DepartureDate'
import EmployeePanel from '../create/EmployeePanel'
export default {
  props: {
    param: String
  },
  watch: {
    param: {
      handler (val) {
        this.getEmployeeInfo(val)
      },
      immediate: true
    }
  },
  components: {DepartureDate, EmployeePanel},
  data () {
    return {
      employeeInfo: {},
      departureVisible: false,
      employeeVisible: false,
      options: []
    }
  },
  methods: {
    getEmployeeInfo (employeeCode) {
      if (employeeCode) {
        employee.getEmployeeAPI({employeeCode}).then(res => {
          const data = res.data || {}
          const options = []
          options.push({label: '手机号', value: data.mobile || '--', code: 'mobile', hidden: false})
          options.push({label: '姓名', value: data.employeeName || '--', code: 'employeeName', hidden: false})
          options.push({label: '邮箱', value: data.email || '--', code: 'email', hidden: false})
          options.push({label: '员工类型', value: data.employeeTypeName || '--', code: 'employeeTypeName', hidden: false})
          options.push({label: '入职日期', value: data.entryDate || '--', code: 'entryDate', hidden: false})
          options.push({label: '离职日期', value: data.departureDate || '--', code: 'departureDate', hidden: data.status !== -1})
          options.push({label: '直属上级', value: data.superiorName || '--', code: 'superiorName', hidden: false})
          options.push({label: '直属部门', value: data.mainDepartmentName || '--', code: 'mainDepartmentName', hidden: false})
          options.push({label: '职位', value: data.positionInfoList || '--', code: 'positionInfoList', hidden: false})
          options.push({label: '职位部门', value: data.departmentInfoList || '--', code: 'departmentInfoList', hidden: false})
          options.push({label: '创建时间', value: data.createTime || '--', code: 'createTime', hidden: false})
          options.push({label: '备注', value: data.remark || '--', code: 'remark', hidden: false})
          this.options = options
          this.employeeInfo = data
        })
      }
    },
    handleSelect (c) {
      if (c === 'resetPwd') {
        this.$msgBox.confirm('确认重置员工登录密码', () => {
          const params = {employeeCode: this.employeeInfo.employeeCode}
          auth.resetAccountPwdAPI(params).then(res => {
            this.afterUpdate(res, 'resetPwd')
          })
        })
      } else {
        if (c === 'departureEmp') {
          this.departureVisible = true
        } else if (c === 'suspendEmp') {
          let status = this.employeeInfo.status
          let msg = ''
          if (status === 1) {
            status = 0
            msg = '停用'
          } else if (status === 0) {
            status = 1
            msg = '启用'
          }
          this.$msgBox.confirm('确认' + msg + '员工账号', () => {
            const params = {status, employeeCode: this.employeeInfo.employeeCode}
            employee.updateEmployeeAPI(params).then(res => {
              this.afterUpdate(res, 'updateEmp')
            })
          })
        }
      }
    },
    editEmp () {
      this.employeeVisible = true
    },
    deleteEmp () {
      this.$msgBox.confirm('确认删除员工', () => {
        const params = {employeeCode: this.employeeInfo.employeeCode}
        employee.deleteEmployeeAPI(params).then(res => {
          this.afterUpdate(res, 'deleteEmp')
        })
      })
    },
    updateDepartureDate (data) {
      employee.updateEmployeeAPI(data).then(res => {
        this.afterUpdate(res, 'updateDepartureDate')
      })
    },
    afterUpdate (res, type) {
      this.$emit('afterUpdate', res, type)
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-emp-detail{
    padding: 15px;
    font-size: 14px;
}
.flex-row{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.info_avatar{
   margin-right: 10px;
}
.info__empCode{
   margin-top: 5px;
   font-size: 13px;
   color: #777;
}
.content{
    margin: 20px;
    &_label{
        color: #777;
        margin-right: 50px;
    }
}
.emp-header{
    font-size: 16px;
    width: 100%;
    padding: 20px 20px 0 20px;
    justify-content:space-between;
}
.emp-account{
    color: #777;
}
.emp-account > div{
    margin:5px;
}
>>>.el-badge__content.is-fixed{
  right: 30px;
}
</style>
